import { View, Text ,TextInput, TouchableOpacity, Image } from 'react-native'
import { useState } from 'react'

import { icons } from '../constants'

const FormField = ({title,value,plcaholder,onChangeText,otherStyle,...props}) => {
    const [showPassword, setShowPassword] = useState(false)
    return (
    <View className={`space-y-2 ${otherStyle}`}>
      <Text className="text-base text-gray-100 font-pmedium">{title}</Text>
      <View className="border-2 flex-row border-black-200 w-full h-16 px-4 bg-black-100 rounded-2xl focus:border-secondary items-center">
        <TextInput 
          className="flex-1 text-white font-psemibold text-base"
          value={value}
          plcaholder={plcaholder}
          onChangeText={onChangeText}
          secureTextEntry={title === 'Password' && !showPassword}
        />
        {title === 'Password' && (
            <TouchableOpacity onPress={() => setShowPassword(!showPassword)} >
                <Image source={!showPassword ? icons.eye : icons.eyeHide} style={{height:"12px",width:"12px"}} resizeMode="contain" />
            </TouchableOpacity>
        )}
      </View>
    </View>
  )
}

export default FormField